<template>
<div  >
  <el-form ref="form" :model="form" label-width="150px">
    <el-row>
      <el-col :span="12" >
        <el-form-item label="提前结清贷款客户申请表：" label-width="180px" prop="isApply">
          <el-radio v-model="form.isApply" :label="1">是</el-radio>
          <el-radio v-model="form.isApply" :label="0">否</el-radio>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="解押表：" prop="unpackNeeded">
          <el-radio v-model="form.unpackNeeded" :label="1">是</el-radio>
          <el-radio v-model="form.unpackNeeded" :label="0">否</el-radio>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <el-form ref="form" :model="form" label-width="150px">
    <el-row>
      <el-col :span="12">
        <el-form-item label="借款人：" prop="bor">
          <el-input v-model="form.bor"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="身份证号:" prop="idc1">
          <el-input v-model="form.idc1"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12" >
        <el-form-item label="贷款金额：" prop="loan">
          <el-input v-model="form.loan" class="companyInput"></el-input>
          <p class="company">万元</p>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="放款时间：" >
          <el-date-picker
            v-model="form.lte"
            type="date"
            placeholder="选择日期"  format="yyyy 年 MM 月 dd 日"
            value-format="yyyy年MM月dd日">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12" >
        <el-form-item label="担保期限：" prop="term">
          <el-input v-model="form.term" class="companyInput"></el-input>
          <p class="company">期</p>
        </el-form-item>
      </el-col>
      <el-col :span="12" >
        <el-form-item label="办理以下第：" prop="mark">
          <el-input v-model="form.mark" class="companyInput"></el-input>
          <p class="company">项</p>
        </el-form-item>
      </el-col>
      <p class="tips"> <span class="tips-t">*备注：</span> 办理以下第几项是指：1、未实际担保
        <span class="tips-c">2、结清解押 </span>
        <span class="tips-c">3、担保费减免</span>
        <span class="tips-c">4、担保费退款 </span>
      </p>
    </el-row>
  </el-form>
  <el-form ref="form" :model="form" label-width="150px">
    <el-row>
      <el-col :span="12">
        <el-form-item label="解押人：" prop="unp">
          <el-input v-model="form.unp"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="身份证号:" prop="idc2">
          <el-input v-model="form.idc2"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12" >
        <el-form-item label="融资金额：" prop="fc">
          <el-input v-model="form.fc" class="companyInput"></el-input>
          <p class="company">元</p>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="大写：" prop="fcb">
          <el-input v-model="form.fcb" placeholder="如整数，请在后面加元和整"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="抵押时间：" prop="mortgageTime">
          <el-date-picker
            v-model="form.mortgageTime"
            type="date"
            placeholder="选择日期"  format="yyyy 年 MM 月 dd 日"
            value-format="yyyy年MM月dd日">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="结清时间：" prop="settlementTime">
          <el-date-picker
            v-model="form.settlementTime"
            type="date"
            placeholder="选择日期"  format="yyyy 年 MM 月 dd 日"
            value-format="yyyy年MM月dd日">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="24" >
        <el-form-item label="房屋地址：" prop="has">
          <el-input v-model="form.has" ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12" >
        <el-form-item label="房屋面积：" prop="area">
          <el-input v-model="form.area" class="companyInput"></el-input>
          <p class="company">m²</p>
        </el-form-item>
      </el-col>
      <el-col :span="12" >
        <el-form-item label="联系电话：" prop="tel">
          <el-input v-model="form.tel" ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24" >
        <el-form-item label="不动产权证号：" prop="rpc">
          <el-input v-model="form.rpc" ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24" >
        <el-form-item label="他项权证号：" prop="htc">
          <el-input v-model="form.htc" ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <el-form ref="form" :model="form" label-width="150px">
    <el-row>
      <el-col :span="12">
        <el-form-item label="保证月还款金额：" prop="mp">
          <el-input v-model="form.mp" class="companyInput"></el-input>
          <p class="company">元</p>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="已还期数：" prop="sta">
          <el-input v-model="form.sta" class="companyInput"></el-input>
          <p class="company">期</p>
        </el-form-item>
      </el-col>
      <el-col :span="12" >
        <el-form-item label="保证金金额：" prop="mr">
          <el-input v-model="form.mr" class="companyInput"></el-input>
          <p class="company">元</p>
        </el-form-item>
      </el-col>
      <el-col :span="12" >
        <el-form-item label="是否逾期：" prop="wtl">
          <el-input v-model="form.wtl" class="companyInput"></el-input>
<!--          <p class="company">元</p>-->
        </el-form-item>
      </el-col>
      <el-col :span="24" >
        <el-form-item label="提前结清费用：" prop="sci">
          <el-input v-model="form.sci" ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24" >
        <el-form-item label="抵扣保证金后补交：" prop="tbp">
          <el-input v-model="form.tbp" ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <div style="text-align: center">
    <el-button type="primary" style="width: 150px" @click="downloadFun"
    >下载</el-button
    >
  </div>

</div>
</template>

<script>
import {
  contractDataUnpack,
  downLoadUnpack
} from '../../../src/assets/js/api'
export default {
  name: "settlementSign",
  props:{
    orderData: {
      type: String,
    },
    showForm:Object
  },
  data(){
    return{
      form:{
        // time1:'',
        isApply:0,
        unpackNeeded:0,
        bor:'',
        idc1:'',
        loan:'',
        lte:'',
        term:'',
        mark:'',
        unp:'',
        idc2:'',
        fc:'',
        fcb:'',
        mortgageTime:'',
        settlementTime:'',
        has:'',
        area:'',
        tel:'',
        rpc:'',
        htc:'',
        mp:'',
        sta:'',
        mr:'',
        wtl:'',
        sci:'',
        tbp:'',
      },
    }
  },
  created() {
    this.getData();
  },
  methods:{
    //下载
    downloadFun(){
      this.form.productType=this.showForm.productType;
      downLoadUnpack(this.form).then(res=>{
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = res;
        link.setAttribute("download", "客户结清解押表");
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      })
    },
    //获取数据
    getData(){
      contractDataUnpack(this.orderData).then(res=>{
        let data=res.data;
        this.form=data;
      })
    },


  },
};
</script>

<style scoped>
.el-form {
  margin-bottom: 28px;
  padding: 22px 22px 0 22px;
  border: 1px #eee solid;
}
.company {
  float: right;
  width: 30px;
  text-align: center;
}
.companyInput {
  width: calc(100% - 35px);
}
.tips{
  font-size: 12px;
  color: #999999;
  padding: 0 0 22px 70px;
  text-align: left;
}
.tips-t{
  font-weight: bold;
  color: #EB1D1D;
}
.tips-c{
  margin-left: 60px;
}
</style>